<template>
  <div>
    <div
      :class="[
        'booksContent',
        {
          colblu: color == 0,
          colgra: color == 1,
          colgre: color == 2,
          colpin: color == 3,
          colylw: color == 4,
        },
      ]"
      :style="{ 'font-size': size + 'px' }"
    >
      <ul>
        <div
          :class="[
            'biapqian',
            {
              colblu: color == 0,
              colgra: color == 1,
              colgre: color == 2,
              colpin: color == 3,
              colylw: color == 4,
            },
          ]"
        >
          {{ content.chapter }}
        </div>
        <li @click="showPopup">
          <h1>{{ content.chapter }}</h1>
          <div v-html="content.content"></div>
        </li>
      </ul>

      <van-popup
        :overlay="false"
        v-model="show"
        position="top"
        :style="{ height: '50px' }"
      >
        <div class="bCTop">
          <i
            class="iconfont icon-xiangzuo"
            @click="$router.push({ name: 'synopsis', query: { id: id } })"
          ></i>
          <div class="bCTopContent">
            <p>你是我的宝贝</p>
            <div
              class="details"
              @click="$router.push({ name: 'synopsis', query: { id: id } })"
            >
              详情
            </div>
          </div>
        </div>
      </van-popup>

      <van-popup
        :overlay="false"
        v-model="show"
        position="bottom"
        :style="{ height: '100px' }"
      >
        <div class="bCBtm">
          <div class="range">
            <div class="chapter">
              <span class="prve" @click="prev">上一章</span>

              <van-slider
                v-model="value"
                bar-height="4px"
                inactive-color="#f6f7f9"
                active-color="rgb(35, 179, 130)"
                @change="sliderchange"
              >
                <template #button>
                  <div class="custom-button"></div>
                </template>
              </van-slider>

              <span class="next" @click="next">下一章</span>
            </div>
          </div>

          <div class="power">
            <div class="item" @click="$router.push('/catalogue')">
              <i class="iconfont icon-liebiao"></i>
              <p>目录</p>
            </div>

            <div class="item">
              <i class="iconfont icon-moon_line"></i>
              <p>夜间</p>
            </div>

            <div class="item" @click="flagPop">
              <i class="iconfont icon-shezhi2"></i>
              <p>设置</p>
            </div>
          </div>
        </div>
      </van-popup>

      <van-popup
        :overlay="false"
        v-model="flag"
        position="bottom"
        :style="{ height: '120px' }"
      >
        <div class="shezhi">
          <div class="itemFont">
            <p>亮度</p>
            <div class="itemContent light">
              <div class="lightSlider">
                <i class="prevLight iconfont icon-moon_line"></i>

                <van-slider
                  v-model="val"
                  bar-height="4px"
                  inactive-color="#f6f7f9"
                  active-color="rgb(35, 179, 130)"
                >
                  <template #button>
                    <div class="light-button"></div>
                  </template>
                </van-slider>
                <i class="nextLight iconfont icon-igw-l-sun"></i>
              </div>
            </div>
          </div>

          <div class="itemFont">
            <p>字号</p>
            <div class="itemContent fontSize">
              <div class="les" @click="less">-</div>
              <div class="num">{{ size }}</div>
              <div class="add" @click="add">+</div>
            </div>
          </div>

          <div class="itemFont">
            <p>主题</p>
            <div class="itemContent yuan">
              <div
                :class="['colblu', { conColor: color == 0 }]"
                @click="(color = 0), onNum(color)"
              ></div>
              <div
                :class="['colgra', { conColor: color == 1 }]"
                @click="(color = 1), onNum(color)"
              ></div>
              <div
                :class="['colgre', { conColor: color == 2 }]"
                @click="(color = 2), onNum(color)"
              ></div>
              <div
                :class="['colpin', { conColor: color == 3 }]"
                @click="(color = 3), onNum(color)"
              ></div>
              <div
                :class="['colylw', { conColor: color == 4 }]"
                @click="(color = 4), onNum(color)"
              ></div>
            </div>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { getContent } from "../../api/content";
export default {
  data() {
    return {
      color: 1,
      flag: false,
      show: false,
      value: 0, // 滑块 滚动条 0-100
      val: 45, // 亮度 滚动条 0-100
      size: 16,
      id: null,
      queryId: null,
      content: [],
      addNum: 0,
    };
  },
  methods: {
    showPopup() {
      this.show = !this.show;
      this.flag = false;
    },
    flagPop() {
      this.show = false;
      this.flag = true;
    },
    // 获取滚动条变化
    sliderchange() {
      var duration = (this.$refs.audio.duration * this.value) / 100;
      this.timeLeft = duration; //修改页面数据
      this.$refs.audio.currentTime = duration; //修改播放时间
    },
    onNum(obj) {
      console.log(obj);
      let color = obj;
      localStorage.setItem("color", color);
      this.color = color;
    },
    less() {
      this.size = --this.size < 12 ? 12 : this.size;
      localStorage.setItem("size", this.size);
    },
    add() {
      this.size = ++this.size > 25 ? 25 : this.size;
      localStorage.setItem("size", this.size);
    },
    prev() {
      console.log("上一章");
      let type = "les";
      this.getContentFun(type);
    },
    next() {
      console.log("下一章");
      let type = "add";
      this.getContentFun(type);
    },
    getContentFun(type) {
      getContent().then((data) => {
        let index = data.data.findIndex((item) => item.id == this.id);
        let list = data.data[index];

        let chapIndex = list.content.findIndex(
          (item) => item.id == this.queryId
        );
        this.content = list.content[chapIndex];

        if (type == "add") {
          this.addNum =
            this.addNum > list.content.length
              ? list.content.length
              : ++this.addNum;
          this.content = list.content[this.addNum];
        } else if (type == "les") {
          this.addNum = list.content.length < this.addNum-- ? 0 : this.addNum;
          this.content = list.content[this.addNum];
          // console.log(this.addNum );
        }
      });
    },
  },
  created() {
    this.$emit("getnavs-btn", false);
    this.color = localStorage.color || 1;
    this.size = localStorage.size || 16;
    this.id = localStorage.qid;
    this.queryId = this.$route.query.id;
    this.getContentFun();
  },
};
</script>

<style lang='less'>
.booksContent {
  background-color: #f6f7f9;
  ul {
    padding: 15px;
    .biapqian {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      padding: 15px;
      font-size: 12px;
      color: #222;
      box-sizing: border-box;
      // background-color: #f6f7f9;
    }
    li {
      margin-top: 30px;
      h1 {
        color: #222;
        font-size: 1.3em;
        text-indent: 0;
        line-height: 1.5em;
        margin-bottom: 20px;
      }
      p {
        text-indent: 2em;
        margin-bottom: 20px;
        color: #222;
        line-height: 30px;
      }
    }
  }
  .bCTop {
    display: flex;
    i {
      flex: 0 0 50px;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
    }
    .bCTopContent {
      flex: 1;
      display: flex;
      justify-content: space-between;
      p {
        line-height: 50px;
        font-size: 14px;
      }
      .details {
        margin-top: 15px;
        height: 10px;
        padding: 4px 8px;
        margin-right: 10px;
        font-size: 12px;
        color: rgb(35, 179, 130);
        border: 1px solid rgb(35, 179, 130);
      }
    }
  }
  .bCBtm {
    padding: 5px 15px;
    position: relative;
    .range {
      min-height: 20px;
      position: absolute;
      width: 100%;
      left: 0;
      top: 25px;
      text-align: center;
      .chapter {
        width: 60%;
        margin: auto;
        position: relative;
        font-size: 14px;
        .custom-button {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: rgb(35, 179, 130);
        }
        .prve {
          position: absolute;
          left: -60px;
          top: -6px;
          color: #969799;
        }
        .next {
          position: absolute;
          right: -60px;
          top: -6px;
          color: #969799;
        }
      }
    }
    .power {
      padding: 0 10px;
      box-sizing: border-box;
      margin-top: 30px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      text-align: center;
      .item {
        padding-top: 15px;
        i {
          font-size: 22px;
        }
        p {
          margin-top: 6px;
          font-size: 12px;
        }
      }
    }
  }
  .shezhi {
    padding: 5px 15px;

    .itemFont {
      display: flex;
      padding-top: 4px;
      p {
        font-size: 14px;
        color: #969799;
        flex: 0 0 30px;
        line-height: 30px;
        text-align: center;
        margin-right: 20px;
      }
      .itemContent {
        flex: 1;
      }
      .itemContent.light {
        position: relative;
        width: 100%;
        .lightSlider {
          position: absolute;
          top: 11px;
          left: 0;
          margin: auto;
          width: 76%;
          position: relative;
          .prevLight {
            position: absolute;
            top: -6px;
            left: -30px;
            font-size: 16px;
          }
          .nextLight {
            position: absolute;
            top: -7px;
            right: -30px;
            font-size: 18px;
          }
          .light-button {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: rgb(35, 179, 130);
          }
        }
      }
      .itemContent.fontSize {
        width: 100%;
        display: flex;
        padding-top: 6px;
        font-size: 16px;
        .les,
        .add {
          text-align: center;
          width: 8%;
          height: 18px;
          padding: 2px 20px;
          border: 1px solid #969799;
        }
        .num {
          flex: 1;
          line-height: 18px;
          text-align: center;
        }
      }
      .itemContent.yuan {
        display: flex;
        justify-content: space-between;
        padding-top: 3px;
        .colblu,
        .colgra,
        .colgre,
        .colpin,
        .colylw {
          width: 50px;
          height: 22px;
        }
      }
    }
  }
}
.colblu {
  background-color: #e8f9ff;
  // border: 2px solid #b4e3f3;
}
.colgra {
  background-color: #f6f7f9;
  // border: 2px solid #dadfe9;
}
.colgre {
  background-color: #bce7b9;
  // border: 2px solid #a5daa1;
}
.colpin {
  background-color: #fbf2f4;
  // border: 2px solid #f1d9df;
}
.colylw {
  background-color: #cece92;
  // border: 2px solid #bbbb67;
}
.conColor {
  border: 2px solid rgb(35, 179, 130);
}
</style>